<!DOCTYPE html>
<!--**
 *Created by wf_H on 2018/8/6.
 *by:web_hwf@sina.com
 *-->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>工作台</title>

    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/css/zui.min.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/css/zui-theme.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/hover.css">

    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/h-base.css">
    <link rel="stylesheet" href="../style/h-index.css">
</head>
<body class="childrenBody">


<div class="row ">
    <div class="col-lg-7 col-md-12 col-sm-12">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title">产品与服务应用统计</div>
            <a href="javascript:;" class="text_item pull-left active"><span>本月</span></a>
            <a href="javascript:;" class="text_item pull-left "><span>今年</span></a>
            <button class="btn btn-primary btn_add pull-right" style="margin-top: 10px">更多 &gt</button>
        </div>

        <div class="gzt_list wk_gzt_list">
            <a href="javascript:;" class="gzt_item">
                <p class="wgl_title1">职工补贴云产品</p>
                <p class="wgl_title2">项目单数</p>
                <p class="wgl_title3">35</p>
                <p class="wgl_title2">服务费总额</p>
                <p class="wgl_title3">125万</p>
                <p class="wgl_title2">待回款服务费</p>
                <p class="wgl_title3">55万</p>
            </a>
            <a href="javascript:;" class="gzt_item">
                <p class="wgl_title1">职工培训云产品</p>
                <p class="wgl_title2">订单总数</p>
                <p class="wgl_title3">208</p>
                <p class="wgl_title2">订单总额</p>
                <p class="wgl_title3">200万</p>
                <p class="wgl_title2">待回款服务费</p>
                <p class="wgl_title3">67万</p>
            </a>
            <a href="javascript:;" class="gzt_item">
                <p class="wgl_title1">职工票券云产品</p>
                <p class="wgl_title2">订单总数</p>
                <p class="wgl_title3">13</p>
                <p class="wgl_title2">发布总票券数</p>
                <p class="wgl_title3">2500张</p>
                <p class="wgl_title2">开通服务客户数</p>
                <p class="wgl_title3">46</p>
            </a>
            <a href="javascript:;" class="gzt_item">
                <p class="wgl_title1">入网情况</p>
                <p class="wgl_title2">已部署平台</p>
                <p class="wgl_title3">8</p>
                <p class="wgl_title2">已入网企业数</p>
                <p class="wgl_title3">248</p>
                <p class="wgl_title2">已注册职工数</p>
                <p class="wgl_title3">74146</p>
            </a>
        </div>
    </div>
    <div class="col-lg-5 col-md-12 col-sm-12">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title">业务最新进展</div>
        </div>
        <div class="gzt_list">
            <ul class="wk_yewu_ul">
                <li>
                    <a href="#">
                        <em class="pull-left">业务员张聪费创建了广州远程教育有限...</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">总管理员谢巍创建了广东职工教育网</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">中山市总工会补贴已回款8.35万</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">荆州市总工会购买了补贴服务</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">辽宁省总工会购买300张学习卡</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">自文明诞生之初，人类就开始记录自己周...</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">小时候我们很多经验都是来自于寓言故事...</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">小时候我们很多经验都是来自于寓言故事...</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title">部署情况</div>
        </div>
        <div class="zxdt_list">
            <div class="wk_bushu">
                <div id="wk_map" style="height:710px;"></div>
                <div class="wk_bushu_tip">
                    <p>
                        <span></span>已部署区域
                    </p>
                    <p>
                        <span></span>转化中区域
                    </p>
                    <p>
                        <span></span>未部署区域
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 ">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title">业绩统计</div>
            <a href="javascript:;" class="text_item pull-left active"><span>今日</span></a>
            <a href="javascript:;" class="text_item pull-left"><span>本周</span></a>
            <a href="javascript:;" class="text_item pull-left "><span>本月</span></a>
            <button class="btn btn-primary btn_add pull-right" style="margin-top: 10px">更多 &gt</button>
        </div>
        <div class="zxdt_list ">
            <table class="wk_yewu_tab loading" width="100%">
                <thead>
                    <tr>
                        <th align="left">部门</th>
                        <th>业务员</th>
                        <th>已入网客户</th>
                        <th>已入网职工</th>
                        <th>自主拓展客户</th>
                        <th>上级分配的客户</th>
                        <th>已转化客户</th>
                        <th>已促成订单</th>
                        <th>已促成订单总额</th>
                    </tr>
                </thead>
                <tbody>
                    <tr bgcolor="#f6f8fa">
                        <td rowspan="3" align="left">市场一线</td>
                        <td>王强</td>
                        <td>2200人</td>
                        <td>2200人</td>
                        <td>0人</td>
                        <td>2200人</td>
                        <td>220人</td>
                        <td>1120</td>
                        <td>￥22万</td>
                    </tr>
                    <tr bgcolor="#f6f8fa">
                        <td>王强</td>
                        <td>2200人</td>
                        <td>2200人</td>
                        <td>0人</td>
                        <td>2200人</td>
                        <td>220人</td>
                        <td>1120</td>
                        <td>￥22万</td>
                    </tr>
                    <tr bgcolor="#f6f8fa">
                        <td>王强</td>
                        <td>2200人</td>
                        <td>2200人</td>
                        <td>0人</td>
                        <td>2200人</td>
                        <td>220人</td>
                        <td>1120</td>
                        <td>￥22万</td>
                    </tr>
                    <tr>
                        <td rowspan="3" align="left">市场二线</td>
                        <td>王强</td>
                        <td>2200人</td>
                        <td>2200人</td>
                        <td>0人</td>
                        <td>2200人</td>
                        <td>220人</td>
                        <td>1120</td>
                        <td>￥22万</td>
                    </tr>
                    <tr>
                        <td>王强</td>
                        <td>2200人</td>
                        <td>2200人</td>
                        <td>0人</td>
                        <td>2200人</td>
                        <td>220人</td>
                        <td>1120</td>
                        <td>￥22万</td>
                    </tr>
                    <tr>
                        <td>王强</td>
                        <td>2200人</td>
                        <td>2200人</td>
                        <td>0人</td>
                        <td>2200人</td>
                        <td>220人</td>
                        <td>1120</td>
                        <td>￥22万</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-md-12 col-sm-12 ">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title">企业转化情况</div>
        </div>
        <div class="zxdt_list">
            <div class="wk_chart">
                <div class="pull-right wk_chart_img wk_chart_img01">
                </div>
                <div class="wk_chart_cont">
                    <div class="wkcc_list">
                        <p>企业库</p>
                        <span>总数2300家</span>
                    </div>
                    <div class="wkcc_list">
                        <p>已入网企业1250家</p>
                        <span>入网率50%</span>
                    </div>
                    <div class="wkcc_list">
                        <p>已购买服务企业525家</p>
                        <span>购买率50%</span>
                    </div>
                    <div class="wkcc_list">
                        <p>已付款企业102</p>
                        <span>付款率20%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-12 col-sm-12">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title">职工服务情况</div>
        </div>
        <div class="zxdt_list">
            <div class="wk_chart">
                <div class="pull-right wk_chart_img wk_chart_img02">
                </div>
                <div class="wk_chart_cont">
                    <div class="wkcc_list">
                        <p>已注册</p>
                        <span>职工15000人</span>
                    </div>
                    <div class="wkcc_list">
                        <p>已被认领职工7500个</p>
                        <span>认领率50%</span>
                    </div>
                    <div class="wkcc_list">
                        <p>已申报服务职工10000个</p>
                        <span>申报率50%</span>
                    </div>
                    <div class="wkcc_list">
                        <p>已享受服务职工7000</p>
                        <span>服务率70%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/js/zui.min.js"></script>

<!--复选美化-->
<script src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/icheck.min.js"></script>
<script>
    /*初始化多选美化*/
    $(document).ready(function () {
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",})
    });

    $(function () {
        $('.nav_list').on('click', 'a', function () {
            $(this).addClass('active').siblings().removeClass('active');
        })


    })
</script>
<!-- map -->
<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/js/echarts.min.js"></script>
<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/js/china.js"></script>
<script type="text/javascript">
    var mydata = [
            {name: '北京', value: '2', union: '北京总工会', deploy: '已部署', txt: '<p>已开通补贴、教育培训、票券等服务</p><p>已入网企业1200 已注册职工28900 已发布补贴3次，共补助1.2万人</p><p>补助总额￥500万，已购买300张学习卡</p><p>供发布800张票券，价值2.5万</p>'},
            {name: '广东', value: '2', union: '广东总工会', deploy: '已部署', txt: '<p>已开通补贴、教育培训、票券等服务</p><p>已入网企业1200 已注册职工28900 已发布补贴3次，共补助1.2万人</p><p>补助总额￥500万，已购买300张学习卡</p><p>供发布800张票券，价值2.5万</p>'},
            {name: '广西', value: '2', union: '广西总工会', deploy: '已部署', txt: '<p>已开通补贴、教育培训、票券等服务</p><p>已入网企业1200 已注册职工28900 已发布补贴3次，共补助1.2万人</p><p>补助总额￥500万，已购买300张学习卡</p><p>供发布800张票券，价值2.5万</p>'},
            {name: '福建', value: '2', union: '福建省总工会', deploy: '已部署', txt: '<p>已开通补贴、教育培训、票券等服务</p><p>已入网企业1200 已注册职工28900 已发布补贴3次，共补助1.2万人</p><p>补助总额￥500万，已购买300张学习卡</p><p>供发布800张票券，价值2.5万</p>'},
            {name: '天津', value: '2', union: '天津省总工会', deploy: '已部署', txt: '<p>已开通补贴、教育培训、票券等服务</p><p>已入网企业1200 已注册职工28900 已发布补贴3次，共补助1.2万人</p><p>补助总额￥500万，已购买300张学习卡</p><p>供发布800张票券，价值2.5万</p>'},
            {name: '上海', value: '2', union: '上海省总工会', deploy: '已部署', txt: '<p>已开通补贴、教育培训、票券等服务</p><p>已入网企业1200 已注册职工28900 已发布补贴3次，共补助1.2万人</p><p>补助总额￥500万，已购买300张学习卡</p><p>供发布800张票券，价值2.5万</p>'},
            {name: '浙江', value: '2', union: '浙江省总工会', deploy: '已部署', txt: '<p>已开通补贴、教育培训、票券等服务</p><p>已入网企业1200 已注册职工28900 已发布补贴3次，共补助1.2万人</p><p>补助总额￥500万，已购买300张学习卡</p><p>供发布800张票券，价值2.5万</p>'},
            {name: '重庆', value: '1', union: '重庆省总工会', deploy: '转化中', txt: ''},
            {name: '山东', value: '1', union: '山东省总工会', deploy: '转化中', txt: ''},
            {name: '河北', value: '1', union: '河北省总工会', deploy: '转化中', txt: ''},
            {name: '贵州', value: '1', union: '贵州省总工会', deploy: '转化中', txt: ''},
            {name: '湖南', value: '1', union: '湖南省总工会', deploy: '转化中', txt: ''},
            {name: '江西', value: '1', union: '江西省总工会', deploy: '转化中', txt: ''},
            {name: '安徽', value: '1', union: '安徽省总工会', deploy: '转化中', txt: ''},
            {name: '江苏', value: '1', union: '江苏省总工会', deploy: '转化中', txt: ''},
        ];
    var myChart = echarts.init(document.getElementById('wk_map'));
    var option = {
        tooltip: {
            // show: false //不显示提示标签
            // formatter: '{a} {b} : {c}', //提示标签格式
            // backgroundColor:"#7de9e5",//提示标签背景颜色
            // textStyle:{color:"#fff"} //提示标签字体颜色
            // trigger: 'item',
            formatter: function (params) {
                if(!params.data) return;
                return '<div class="map_box"><span class="map_title">' + params.data.union + '</span>' + '<span class="map_title">' + params.data.deploy + '</span>' + '<div class="map_cont">' + params.data.txt + '</div></div>';
            }
        },
        //左侧小导航图标
        visualMap: {
            show : false,
            x: 'right',
            y: 'top',
            splitList: [
                {start: 1, end: 2},
                {start: 0, end: 1},
            ],
            color: ['#4886c0', '#d9612c']
        },
        series: [{
            type: 'map',
            mapType: 'china',
            top:30,
            bottom: 30,
            label: {
                normal: {
                    show: true,//显示省份标签
                    textStyle:{color:'#000'}//省份标签字体颜色
                },
                emphasis: {//对应的鼠标悬浮效果
                    show: true,
                    textStyle:{color:'#fff'}
                }
            },
            itemStyle: {
                normal: {
                    borderWidth: .2,//区域边框宽度
                    borderColor: '#ddd',//区域边框颜色
                    areaColor:'#a6a6a6',//区域颜色
                },
                emphasis: {
                    borderWidth: 1,
                    borderColor: '#fff',
                    areaColor:'#4886c0',
                }
            },
            data: mydata

        }],
    };

    myChart.setOption(option);
    // myChart.on('mouseover', function (params) {
    //     var dataIndex = params.dataIndex;
    //     console.log(params);
    // });
</script>

</body>
</html>